<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>


<div class="container">
    <h2>Excel配置</h2>
    <p style="color: red;">输入框中填写属性对应的Excel列名 例如 名称：A</p>
    <form class="form-horizontal excel_form" role="form" style="width: 40%;">

        <div class="form-group">
            <label class="col-sm-6 control-label">商品id</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="goodsId" th:value="${goodsId}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-6 control-label" >商品名</label>
            <div class="col-sm-6">
            <input type="text" class="form-control" name="name" th:value="${name}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-6 control-label">商品主图链接</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="image" th:value="${image}"/>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-6 control-label">商品详情页/淘宝客链接</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="details" th:value="${details}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-6 control-label">商品价格</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="price" th:value="${price}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-6 control-label">已购买人数/月销量</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="alreadyBuy" th:value="${alreadyBuy}"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-6 control-label">优惠券的折扣值/面额</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="discount" th:value="${discount}"/>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-6 control-label" >优惠券开始时间</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="startTime" th:value="${startTime}"/>
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-6 control-label">优惠券结束时间</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="endTime" th:value="${endTime}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-6 control-label">优惠券链接</label>
            <div class="col-sm-6">
            <input type="text" class="form-control" name="link" th:value="${link}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-6 control-label">优惠券淘口令，没有就填优惠券剩余量</label>
            <div class="col-sm-6">
            <input type="text" class="form-control" name="mainKey" th:value="${mainKey}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-4">
                <button id="config-excel" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </form>

    <h2>分类的关键字匹配</h2>
    <p style="color: red;">类别 关键字#关键字 （使用#分隔）</p>
    <form class="form-horizontal type_form" role="form" style="width: 40%;">
        <div class="form-group" th:each="type : ${type_dict}">
            <label class="col-sm-4 control-label" th:text="${type.key}"></label>
            <div class="col-sm-8">
                <input type="text" class="form-control" th:name="${type.key}" style="width: 800px;" th:value="${type.value}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <button id="config-type" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </form>

<script>
    function submit(url, form_type) {
        var $input = $(form_type+' input[type="text"]')
        console.log($input)
        var excel_form = {}
        $.each($input, function (index, item) {
            var id = $(item).attr('name')
            excel_form[id] = $(item).val()
        })
            console.log(excel_form)
        $.post(url, excel_form, function (data) {

        })
        window.location.reload(true)
    }

    $('#config-excel').on('click',function () {
        submit('/updateExcel', '.excel_form')
    })
    $('#config-type').on('click',function () {
        submit('/updateType', '.type_form')
    })
    $(window.parent.document).find("#main-iframe").load(function () {
        var main = $(window.parent.document).find("#main-iframe")
        var thisheight = $(document).height()
        main.height(thisheight)
    })
</script>
</div>
</body>
</html>